<template>
  <view class="content">
    <view class="top">
      <u-avatar class="avatar" src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80" />
      <view class="user-name" @click="detail()">
        <view class="top-text">{{ 'wly' || '--' }}</view>
        <view class="top-introduction">{{ '管理员' || '--' }} {{ '任务管理' || '--' }}</view>
      </view>
      <view class="detail" @click="detail()">
        <u-icon name="arrow-right" />
      </view>
    </view>

    <u-cell-group style="margin-top: 20rpx">
      <u-cell-item icon="setting" title="修改密码" :arrow="true" arrow-direction="right" @click="link" />
      <u-cell-item icon="download" title="整包升级" :arrow="true" arrow-direction="right" @click="isUpdate" />
    </u-cell-group>
    <view class="bottom">
      <view class="bottom-btn" @click="handleVisible">退出登录</view>
    </view>

    <view class="service">当前系统：任务管理{{ version }}</view>
    <u-modal v-model="outLoginVisible" :content="content" show-cancel-button @confirm="outLogin" />

    <view>
      <u-toast ref="uToast" />
    </view>
    <u-popup v-model="showProgress" :mask-close-able="false" mode="center" width="80%" height="200rpx">
      <view style="width: 80%; margin: 50rpx auto; text-align: center">
        <text>升级中...</text>
        <u-line-progress :percent="progress" :round="false" :striped="true" :striped-active="true" />
      </view>
    </u-popup>
    <u-modal v-model="show" :show-cancel-button="true" title="升级" content="检测到有新的版本,是否确认升级?" @confirm="confirmUpdate" />
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      outLoginVisible: false,
      content: '确定要退出？',
      version: uni.getStorageSync('version'),
      show: false,
      pkgUrl: '',
      msg: '',
      showProgress: false,
      progress: 0
    }
  },
  computed: {
    ...mapState({
      extend: state => state.user.extend
    }),

    photo: function () {
      return 'data:image/png;base64,' + this.extend.frontPhoto
    },

    info: function () {
      return this.extend
    }
  },
  onShow() {
    const that = this
    // #ifdef APP-PLUS
    plus.runtime.getProperty(plus.runtime.appid, function (widgetInfo) {
      that.version = widgetInfo.version
    })
    // #endif
  },
  methods: {
    link() {
      uni.navigateTo({
        url: '/pages/modifyPassword/index',
        animationType: 'slide-in-bottom',
        animationDuration: 100
      })
    },

    handleVisible() {
      this.outLoginVisible = true
    },

    outLogin() {
      const baseURL = uni.getStorageSync('baseURL')
      uni.clearStorageSync()
      uni.setStorageSync('baseURL', baseURL)
      uni.redirectTo({
        url: '/pages/login/index'
      })
    },

    detail() {
      uni.navigateTo({
        url: '/pages/my-info/details/index'
      })
    },

    async isUpdate() {
      // 如果系统为  ios
      if (uni.getStorageSync('platform') === 'ios') {
        uni.showToast({
          title: '苹果手机不支持整包升级',
          icon: 'none',
          duration: 2000
        })
      } else {
        const res = await this.$u.api.getFileVersions({ version: uni.getStorageSync('version') })
        if (res.code === 200) {
          if (res.data.pageItems.show) {
            uni.showToast({
              title: '已是最新版本,不需要升级',
              icon: 'none',
              duration: 2000
            })
          } else {
            this.show = true
          }
        }
      }
    },
    confirmUpdate() {
      var that = this
      this.showProgress = true
      uni.downloadFile({
        url: uni.getStorageSync('downUrl'),
        timeout: 120000, // 2分钟
        success: downloadResult => {
          if (downloadResult.statusCode === 200) {
            // #ifdef APP-PLUS
            plus.runtime.install(
              downloadResult.tempFilePath,
              { force: false },
              function () {
                that.$refs.uToast.show({
                  title: '更新成功！',
                  type: 'success'
                })
                plus.runtime.restart()
              },
              function () {
                that.$refs.uToast.show({
                  title: '更新失败！',
                  type: 'error'
                })
              }
            )
            // #endif
          }
        }
      })
        .onProgressUpdate(res => {
          // 下载进度
          this.progress = res.progress
        })
    }
  }
}
</script>

<style scoped lang="scss">
@import './index.scss';

::v-deep .uni-scroll-view{
  overflow: hidden !important;
}
</style>
